<template>
    <div class="news-wrapper">
        <loading :state="loading"></loading>
        <!--<van-tabs v-model="active" @click="clickTab">-->
            <!--<van-tab v-for="(item, index) in notice" :title="item.title" :key="index">-->
                <!--&lt;!&ndash;<div class="notice">&ndash;&gt;-->
                <!--&lt;!&ndash;<span>1</span>&ndash;&gt;-->
                <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</van-tab>-->
        <!--</van-tabs>-->
        <van-list v-model="load"
                  :finished="LastData[active]"
                  @load="loadMore"
                  class="news-ul">
            <van-cell v-for="(item,index) in news[active]" :key="index" class="news-li">
                <news-item :news="item"/>
            </van-cell>
        </van-list>
        <p v-if="LastData[active]" class="no-more">敬请期待更多产品</p>
    </div>
</template>

<script type="text/ecmascript-6">
    // import News from '../../components/news/newsList';
    import NewsItem from '../../components/news/newItem';

    export default {
        name: 'notice',
        components: {
            NewsItem
            // News
        },
        data() {
            return {
                notice: [],
                newsType: 'Integral',
                active: 0,
                news: [], // 获取的积分消息
                LoadData: [], // 是否应该调用获取数据方法
                LastData: [], // 数据是否加载完没有了
                loading: true,
                load: false,
                pages: [], // 请求页数
                size: 10
            };
        },
        created() {
            this.news = new Array(3).fill([]);
            this.pages = new Array(3).fill(0);
            this.LastData = new Array(3).fill(false);
            this.LoadData = new Array(3).fill(true);
        },
        mounted() {
            this.loadMore();
        },
        methods: {
            clickTab(index) {
                this.active = index;
                this.newsType = this.notice[index].newsType;
                if (this.pages[index] === 0) {
                    this.loadMore();
                }
            },
            loadMore() {
                // 获取数据和上拉加载
                let index = this.active;
                let type = this.newsType;
                if (this.LoadData[index] === true) {
                    // console.log(1111, this.LastData[index]);
                    this.load = true;
                    this.LoadData[index] = false;
                    let data = {
                        page: this.pages[index],
                        size: this.size
                    };
                    // 根据type判断方法
                    this.$Index[`get${type}News`](data).then(res => {
                        this.loading = false;
                        this.load = false;
                        this.news[index] = this.news[index].concat(res.list);
                        this.pages[index]++;
                        // 没有数据了
                        let DataNum = res.list.length;
                        if (DataNum === 0) {
                            this.LoadData[index] = false;
                            this.LastData[index] = true;
                            // console.log(5555, this.LastData[index]);
                            return;
                        }
                        //  打开查询数据接口
                        this.LoadData[index] = true;
                    }, () => {
                      this.loading = false;
                    });
                }
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .news-wrapper {
        .no-more {
            word-vw(12, third-ash);
            flex-center();
            margin-bottom: 30vw;
        }
        .news-ul {
            padding: 2vw 3vw
            .news-li {
                background: white;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 0
            }
        }
        .van-tab__pane {
            position relative
        }
        .van-tab__pane:first-of-type .notice {
            top: 2vw;
            left: 30vw;
            z-index: 999;
        }
        .van-tab__pane:nth-of-type(2) .notice {
            top: 2vw;
            left: 60vw;
            z-index: 999;
        }
        .van-tab__pane:last-of-type .notice {
            top: 2vw;
            left: 90vw;
            z-index: 999;
        }
        .notice {
            width: 4vw;
            height: 4vw;
            border-radius(50%);
            background: #e7395a;
            border: 1px solid #fff;
            position: fixed;
            flex-center();
            & span {
                color: white
                font-size word10
            }
        }
    }

</style>
